<template>
	<view class="page flex" :style="{ '--fss': app.theme.fss() }">
		<view class="background">
			<image class="image" src="/static/img/test/test.png" mode="aspectFill"></image>
			<view class="black"></view>
		</view>
		<view class="main flex">
			<common-header title="" background="linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0))"></common-header>
			<scroll-view class="intrMain" scroll-y>
				<view class="scMain">
					<view class="coverView">
						<image src="/static/img/test/test.png" class="image" mode="aspectFill"></image>
						<text class="iconfont play icon-bofang2"></text>
					</view>
					<view class="musicTitle Line2">美妙的同志之歌</view>
					<view class="userView flex" @tap="app.util.openUrl({ url: '/pages/user/person' })">
						<text class="iconfont icon-24gf-user2"></text>
						<text class="text ell">思维羊水</text>
					</view>
					<view class="time ell">2024年05月28日 16:56</view>
					<view v-html="content" class="content"></view>
					<view class="desc">该歌曲由AI生成，请勿从事违法行为</view>
				</view>
			</scroll-view>
			<view class="footView">
				<view class="btnFlex flex">
					<view class="left flex">
						<view class="item flex">
							<text class="iconfont icon-aixin" style="font-size: calc(42rpx * var(--fss));"></text>
							<text class="num">42.2w</text>
						</view>
						<view class="item flex">
							<text class="iconfont icon-fenxiangzhuanfa" style="font-size: calc(44rpx * var(--fss));"></text>
							<text class="num">882</text>
						</view>
						<view class="item flex">
							<text class="iconfont icon-xiazai5" style="font-size: calc(40rpx * var(--fss));"></text>
							<text class="num">35</text>
						</view>
					</view>
					<view class="right flex">
						<view @tap="playListRef.open()" class="item iconfont icon-yinleliebiao-pc" style="font-size: calc(44rpx * var(--fss))"></view>
						<view @tap="playMoreRef.open()" class="item iconfont icon-gengduo"></view>
					</view>
				</view>
				<view class="timeLine flex">
					<view class="left flex">
						<text class="iconfont icon-pause-full" v-if="!true"></text>
						<text class="iconfont icon-bofang2" v-else style="margin-left: 4rpx;"></text>
					</view>
					<view class="progress_bar flex">
						<view class="text">00:10</view>
						<slider
							class="slider" 
							activeColor="#f1f1f1"
							backgroundColor="rgba(255,255,255,0.15)" 
							:value="10"
							:block-size="15" 
							:step="1" 
							:min="0" 
							:max="100"
						/>
						<view class="text">05:25</view>
					</view>
				</view>
				<footer-bar></footer-bar>
			</view>
		</view>
	</view>
	<play-list ref="playListRef" />
	<play-more ref="playMoreRef" />
</template>

<script setup>
	import { ref, onMounted, inject } from "vue";
	import {  onLoad, onShow } from "@dcloudio/uni-app";
	const app = inject('app');
	
	/* 变量区域 */
	// 播放列表
	const playListRef = ref();
	
	// 播放更多弹窗
	const playMoreRef = ref();
	
	// 歌词内容
	const content = ref(`[Verse]<br/>I tried so many times<br/>So many times, ooh<br/>Some is skill, some is luck<br/>But in the end, I failed anyway<br/><br/>No, noIt's not that I don't understand<br/>Oh, oh<br/>I just don't have the skill to pull it off myself<br/><br/>[Instrumental Interlude]<br/><br/>Haaa, haaa<br/><br/>[Chorus]<br/>I'm not an artist, is what I'd like to say<br/>But when I sit down in my lonely little desk<br/>And I write and write, and pour out all my pain<br/>Then I know, that perhaps, I am indeed an artist<br/><br/>Hoo, hoo<br/>I know it's not the same<br/>Hoo, hoo<br/>But this is not in vain<br/><br/>My emotions and my pain should be considered art<br/><br/>[Instrumental Break]<br/><br/>[Verse]<br/>I know, I'm not very skilled at all<br/>But please, just listen to my cry<br/>Even if for just a second<br/><br/>Ah, ah<br/>It's not that I don't understand<br/>No, no<br/>But I know this isn't worthless in the end<br/><br/>[Chorus]<br/>I'm not an artist, or so I'd like to say<br/>But the truth is that this is my purpose<br/>To write and write, to pour out all this pain<br/>That I keep hidden deep inside my broken heart<br/><br/>[Post-Chorus]<br/>Hoo, hoo<br/>I know it's not the same<br/>Hoo, hoo<br/>But this is not in vain<br/><br/>I won't let you say I'm not doing my best<br/><br/>[Instrumental Break]<br/><br/>[Break]<br/><br/>[Instrumental Bridge]<br/>Oooh, ooh<br/>Not in vain, oooh<br/>Noo<br/><br/>[Drop]<br/><br/>[Instrumental Break]<br/><br/>[Instrumental Bridge]<br/><br/>[Outro]<br/>Oooh, ooh<br/>Not in vain, oooh<br/>Noo<br/><br/>[Fade out]<br/>[End]<br/>`);
	
	/* 方法区域 */
</script>

<style lang="scss" scoped>
	.page{
		height: 100vh;
		width: 100%;
		overflow: hidden;
		flex-direction: column;
		.background{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			overflow: hidden;
			.image{
				width: 100%;
				height: 100%;
				filter: blur(145rpx);
			}
			.black{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0,0,0,0.4);
			}
		}
		.main{
			height: 0;
			flex: 1;
			position: relative;
			z-index: 3;
			flex-direction: column;
			align-items: center;
			.intrMain{
				height: 0;
				flex: 1;
				.scMain{
					padding: 20rpx 50rpx 0 50rpx;
					.coverView{
						margin: 0 auto;
						width: 420rpx;
						height: 420rpx;
						border-radius: 13rpx;
						box-shadow: 0 0 20rpx #363636;
						position: relative;
						transition: 0.2s all;
						&:active{
							opacity: 0.8;
						}
						.image{
							display: block;
							width: 100%;
							height: 100%;
							border-radius: 13rpx;
						}
						.play{
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							color: rgba(255,255,255,0.85);
							font-size: 95rpx;
						}
					}
					.musicTitle{
						margin-top: 40rpx;
						font-size: calc(50rpx * var(--fss));
						color: #FFF;
						font-weight: bold;
						line-height: 1.45;
						text-align: center;
					}
					.userView{
						flex-direction: row;
						align-items: center;
						justify-content: center;
						height: 40rpx;
						margin-top: 33rpx;
						color: rgba(255,255,255,1);
						.iconfont{
							font-size: calc(26rpx * var(--fss));
						}
						.text{
							margin-left: 12rpx;
							font-size: calc(26rpx * var(--fss));
						}
					}
					.time{
						text-align: center;
						margin-top: 10rpx;
						color: rgba(255,255,255,0.7);
						font-size: calc(24rpx * var(--fss));
					}
					.content{
						margin-top: 40rpx;
						color: rgba(255,255,255,0.9);
						font-size: calc(29rpx * var(--fss));
						line-height: 1.55;
					}
					.desc{
						margin-top: 20rpx;
						color: rgba(255,255,255,0.55);
						font-size: calc(22rpx * var(--fss));
						line-height: 1.55;
					}
				}
			}
			.footView{
				padding: 0 38rpx 20rpx 38rpx;
				width: 100%;
				margin-top: 40rpx;
				.btnFlex{
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.left{
						flex-direction: row;
						align-items: center;
						.item{
							flex-direction: row;
							align-items: center;
							margin-right: 61rpx;
							transition: 0.2s all;
							position: relative;
							line-height: 60rpx;
							padding: 0 6rpx;
							&.active{
								.iconfont{
									color: #ff4130;
								}
								.num{
									color: #ff4130;
								}
							}
							&:active{
								opacity: 0.8;
							}
							.iconfont{
								font-size: calc(47rpx * var(--fss));
								color: rgba(255,255,255, 1);
							}
							.num{
								font-size: calc(18rpx * var(--fss));
								color: rgba(255,255,255,0.55);
								position: absolute;
								top: -27rpx;
								right: -24rpx;
								height: 1.2;
							}
						}
					}
					.right{
						flex-direction: row;
						align-items: center;
						.item{
							flex-direction: row;
							align-items: center;
							margin-left: 22rpx;
							padding: 0 6rpx;
							transition: 0.2s all;
							line-height: 60rpx;
							font-size: calc(40rpx * var(--fss));
							color: rgba(255,255,255, 0.5);
							&:active{
								opacity: 0.8;
							}
						}
					}
				}
				.timeLine{
					margin-top: 10rpx;
					flex-direction: row;
					align-items: center;
					.left{
						background: rgba(255,255,255,0.1);
						backdrop-filter: blur(10rpx);
						height: 60rpx;
						width: 85rpx;
						border-radius: 30rpx;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						color: rgba(255,255,255,0.95);
						transition: 0.2s all;
						.iconfont{
							font-size: calc(33rpx * var(--fss));
						}
						&:active{
							opacity: 0.8;
						}
					}
					.progress_bar{
						flex: 1;
						width: 0;
						margin-left: 15rpx;
						flex-direction: row;
						align-items: center;
						height: 80rpx;
						.text {
							width: 80rpx;
							text-align: center;
							font-size: calc(22rpx * var(--fss, 1));
							color: rgba(255,255,255,0.55);
						}
						.slider {
							flex: 1;
							width: 0;
							margin: 0 15rpx;
							:deep(.uni-slider-handle-wrapper) {
								height: 4rpx;
							}
							:deep(.uni-slider-thumb) {}
							:deep(.uni-slider-track) {
								max-width: 100%;
							}
							:deep(.uni-slider-handle){
								transform: scale(0.6);
							}
							:deep(.uni-slider-thumb){
								transform: scale(0.6);
							}
						}
					}
				}
			}
		}
	}
</style>